<template>
	<view class="my">
		<view class="panel">
			<view class="uni-flex header">
				<view class="uni-flex avatar-wrap">
					<image mode="aspectFill" :src="user.avatar" class="image" />
				</view>
				<view class="uni-flex base-info">
					<text class="username text-one-line">{{ user.name }}</text>
					<text class="role text-one-line">{{ user.role_names }}</text>
				</view>
				<view class="goto-base-info" @tap="gotoBaseInfo">
					<icon class="iconfont icon-right" />
				</view>
			</view>
			<view class="uni-flex stat-data">
				<view class="uni-flex uni-flex-item" @tap="gotoMyTopic" :data-key="user.key">
					<text>{{ user.topic_count}}</text>
					<text>帖子</text>
				</view>
				<view class="uni-flex uni-flex-item" @tap="gotoMyComment" :data-key="user.key">
					<text>{{ user.comment_count }}</text>
					<text>回复</text>
				</view>
				<view class="uni-flex uni-flex-item" @tap="gotoMyScore" :data-key="user.key">
					<text>{{ user.score_count }}</text>
					<text>积分</text>
				</view>
			</view>
		</view>
		
		<view class="panel notifications">
			<view class="item" @tap="gotoNotification">
				<view class="title">通知</view>
				<view class="badge" v-if="stat_counts.notification_count > 0"><text>{{stat_counts.notification_count || ''}}</text></view>
				<view class="icon"><icon class="iconfont icon-right" /></view>
			</view>
			<view class="item">
				<view class="title">邮箱</view>
				<view><text>{{user.email}}</text></view>
			</view>
		</view>
		<view class="panel">
			<button type="default" @tap="logout">退出</button>
		</view>
	</view>
</template>

<script>
	import ListOptions from '../../minxins/list-options.js'

	export default {
		data() {
			return {
				page: 'my',
				user: {},
				stat_counts: {}
			}
		},
		mixins: [ListOptions],
		components: {
		},
		async onLoad(options) {
			console.log('onLoad...')
			this.options = Object.assign({}, this.options, options)
			try {
				let result = await this.fetchPageData()
				this.renderPage(result)
			} catch (error) {
				
			}
		},
		async onShow() {
			console.log('onShow...')
			let backToMyReferer = this.$store.getters.getBackToMyReferer
			let refreshReferer = ['pages/my/base-info']
			if (backToMyReferer === null || !refreshReferer.includes(backToMyReferer)) {
				console.log(`backToMyReferer: ${backToMyReferer} don't need to refresh page`)
				return
			}
			this.$store.commit('setBackToMyReferer', null)
			try {
				let result = await this.fetchPageData()
				this.renderPage(result)
			} catch (error) {
				
			}
		},
		methods: {
			async fetchPageData() {
				let user = this.$getUser()
				if (!user.key) {
					console.log(`no user info...`)
					return
				}
				this.options.__resource_id = user.key
				this.options.additional = "stat_counts"
				let result = await this.$api.my(this.options);
				return result;
			},
			gotoBaseInfo(e) {
				console.log(e);
				wx.navigateTo({
				  url: "/pages/my/base-info"
				})
			},
			gotoMyTopic(e) {
				uni.navigateTo({
				  url: "/pages/my-topic/my-topic"
				})
			},
			gotoMyComment(e) {
				uni.navigateTo({
				  url: "/pages/my-comment/my-comment?user_key=" + e.currentTarget.dataset.key
				})
			},
			gotoMyScore(e) {
				uni.navigateTo({
				  url: "/pages/my-score/my-score"
				})
			},
			gotoNotification(e) {
				uni.navigateTo({
				  url: "/pages/notification/notification"
				})
			},
			renderPage(result) {
				if (result.ret == 0) {
					this.user = result.data.data
					this.stat_counts = result.data.stat_counts
				}
			},
			async logout() {
				let response = await this.$api.logout()
				if (response.ret == 0) {
					this.$removeUser()
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
.my {
	background-color: #eee;
	.panel {
		background-color: #fff;
		&:not(:first-child) {
		  margin-top: 20upx;
		}
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20upx 30upx;
			.title {
				flex-grow: 1;
			}
			.badge {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 10upx;
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				background-color: #4cd964;
				color: white;
			}
			&:not(:last-child) {
			  border-bottom: 1px solid #eee;
			}
		}
	}
  .header {
		padding: 30upx;
    border-bottom: 1px solid #eee;
    .avatar-wrap {
      justify-content: center;
      align-items: center;
      .image {
        width: 180upx;
        height: 180upx;
        border-radius: 100%;
      }
    }
    .base-info {
      flex-direction: column;
			flex-wrap: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex-grow: 1;
			padding-left: 40upx;
			.username {
				font-size: 60upx;
				font-weight: 600;
			}
    }
		.goto-base-info {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 20%;
			.icon-right {
				font-size: 40upx;
			}
		}
  }
  .stat-data {
    padding: 30upx 0;
    .uni-flex {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .division {
	  background-color: aliceblue;
	  height: 10upx;
  }
  .notifications {
		
  }
	.logout-box {
		margin-top: 100upx;
	}
}
</style>
